import React, { Component } from 'react';
import { Icon, Switch, message } from 'antd';
import RunImg from './images/remote-help-run.svg';
import StopImg from './images/remote-help-stop.svg';
import { get } from 'lodash';
import { getRemoteStatus, openRemote, closeRemote } from '@api/remoteHelp';
import './index.less';

const prefixCls = 'remote-help';

class RemoteHelp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      status: false,
      checked: false
    };
  }
  componentDidMount() {
    getRemoteStatus()
      .then(res => {
        const status = get(res.data.data.result, 'status', 'stoped');
        const combinedStatus = status === 'stoped' ? false : true;
        this.setState({
          status: combinedStatus,
          checked: combinedStatus
        });
      })
      .catch(() => {
        message.error('获取状态失败');
      });
  }
  onSwitchChange = checked => {
    //   发送相应请求
    if (checked) {
      this.setState({ status: true, checked: true });
      // eslint-disable-next-line
      openRemote({ group_num: 1 })
        .then(() => {
          message.success('开启远程服务成功');
        })
        .catch(() => {
          message.error('开启远程服务失败');
        });
    } else {
      this.setState({ status: false, checked: false });
      // eslint-disable-next-line
      closeRemote({ group_num: 1 })
        .then(() => {
          message.success('关闭远程服务成功');
        })
        .catch(() => {
          message.error('关闭远程服务失败');
        });
    }
  };
  render() {
    const { loading, status, checked } = this.state;
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-page-title`}>远程协助</div>
        <div className={`${prefixCls}-tips`}>
          <Icon type="info-circle" theme="twoTone" twoToneColor="#fc8e49" />
          &nbsp;
          当遇到以下情况：添加的任务不能正常检测功能异常问题，而系统没有配置公网时，请您先与厂商确认后，方可开启远程协助
        </div>
        <div className={`${prefixCls}-handle`}>
          {status ? (
            <div style={{ display: 'flex' }}>
              <img src={RunImg} alt="" />
              <div style={{ marginLeft: 24 }}>
                <h2>断开远程服务</h2>
                <span>您有一项远程任务正在执行</span>
              </div>
            </div>
          ) : (
            <div style={{ display: 'flex' }}>
              <img src={StopImg} alt="" />
              <div style={{ marginLeft: 24 }}>
                <h2>开启远程服务</h2>
                <span>点击开关可开启远程协助</span>
              </div>
            </div>
          )}

          <Switch loading={loading} onChange={this.onSwitchChange} checked={checked} />
        </div>
      </div>
    );
  }
}

export default RemoteHelp;
